<template>
  <div>
    <!--轮播图展示-->
    <div>
      <el-carousel height="400px" :interval="3000" arrow="always">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle">
      <div class="left">
        <div class="head">
          <div v-if="isLoggedIn" class="welcome">
            <span>你好! {{ nickName }}</span>
            <span>欢迎使用智慧医疗系统，以下是本系统的三大显著特点！</span>
          </div>
          <div v-else class="welcome">
            <span>你好！</span>
            <span>欢迎使用智慧医疗系统，以下是本系统的三大显著特点，请登录以继续使用！</span>
          </div>
        </div>
        <div class="content">
          <div class="content-top">
            <div class="box">
              <i class="iconfont">&#xe6b9;</i>
              <span>优化提效</span>
            </div>
            <div class="box">
              <i class="iconfont">&#xe704;</i>
              <span>智能问答</span>
            </div>
            <div class="box">
              <i class="iconfont">&#xe70d;</i>
              <span>实时监测</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="List">
      <div class="List-title">
        <div class="titleLeft">
          <span>官方合作医院</span>
        </div>
      </div>
      <div class="List-content">
        <div class="List-item" v-for="(item, index) in paginatedItems" :key="index">
          <img :src="item.hospitalLogo" :alt="item.hospitalName" />
        </div>
      </div>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="filteredItems.length" :page-size="pageSize"
          v-model:current-page="currentPage" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useRouter } from 'vue-router';
import { reactive, computed, ref, onMounted } from 'vue';
import axios from 'axios'; // 引入 Axios

// 使用 import 引入图片
import image1 from '@/assets/images/智慧医疗.png';
import image2 from '@/assets/images/智慧医疗.png';
import image3 from '@/assets/images/智慧医疗.png';
// import hospitalLogo1 from '@/assets/images/北京协和.jpg';
// import hospitalLogo2 from '@/assets/images/北三.png';
// import hospitalLogo3 from '@/assets/images/北一.jpg';
// import hospitalLogo4 from '@/assets/images/川大.jpg';
// import hospitalLogo5 from '@/assets/images/军院.jpg';
// import hospitalLogo6 from '@/assets/images/复大.jpg';
// import hospitalLogo7 from '@/assets/images/北京协和.jpg';
// import hospitalLogo8 from '@/assets/images/北三.png';
// import hospitalLogo9 from '@/assets/images/北一.jpg';
// import hospitalLogo10 from '@/assets/images/北京协和.jpg';
// import hospitalLogo11 from '@/assets/images/川大.jpg';
// import hospitalLogo12 from '@/assets/images/北京协和.jpg';

interface HospitalInfo {
  hospitalId: number;
  hospitalName: string;
  hospitalLogo: string;
}

const images = reactive([image1, image2, image3]);

const isLoggedIn = ref(false);//欢迎语切换
const nickName = ref();//昵称
const pageSize = 12;
const currentPage = ref(1);
const filteredItems = ref<HospitalInfo[]>([]);

const fetchHospitalInfo = async () => {
  try {
    const token = localStorage.getItem('token'); // 获取Token
    const response = await axios.get('/api/hospitalinfo/list', {
      headers: {
        'Authorization': `Bearer ${token}` // 传递Token
      }
    });
    console.log("医院：",response.data)
    if (response.data && response.data.rows && response.data.rows.length > 0) {
      // 将后端返回的数据映射到 filteredItems
      filteredItems.value = response.data.rows.map((hospital: HospitalInfo) => ({
        hospitalId: hospital.hospitalId, // 保持字段名一致
        hospitalName: hospital.hospitalName,
        hospitalLogo: hospital.hospitalLogo
      }));

    } else {
      console.error('未获取到医院信息');
    }
  } catch (error) {
    console.error('获取医院信息失败:', error);
  }
};


const paginatedItems = computed(() => {
  if (!filteredItems.value) return [];
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return filteredItems.value.slice(start, end);
});

onMounted(() => {
  isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true';
  nickName.value = localStorage.getItem('nickName');
  fetchHospitalInfo(); // 加载医院信息
});
</script>


<style scoped lang="scss">
img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover; // 确保图片填充整个容器
}


.middle {
  display: flex;
  width: 1200px;

  .left {
    margin: 20px 0 0 0;
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .head {
      .welcome {
        display: flex;
        flex-direction: column; // 垂直排列
        gap: 5px; // 添加间距
      }

      span {
        font-size: 25px;
        font-weight: bold;
        margin: 0;
      }
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.content-top {
  display: flex;
  justify-content: center; //水平居中
  align-items: center; //垂直居中
  width: 100%;
}

.content-bottom {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.box {
  width: 275px;
  height: 280px; // 设置为正方形
  margin: 0 63px; // 可选：添加间距
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  .iconfont {
    font-size: 80px; // 设置图标的大小
    margin-bottom: 10px; // 图标和文字之间的间距
    color: #1280ef;
  }

  span {
    font-size: 20px;
    color: black;
  }

  &:hover {
    transform: translateY(-5px); // 悬浮时向上抖动
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影
    border: 1px solid #ddd; // 添加边框
    transition: transform 0.3s ease; // 添加过渡效果
  }
}

.List-title {
  font-size: 26px;
  font-weight: bold;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  background-color: #f8f9fa; // 可选：背景颜色
  border-bottom: 1px solid #ddd; // 可选：底部边框
}

.List-top {
  display: flex;
  align-items: center;

  .search-container {
    display: flex;
    align-items: center;
    margin-left: auto;

    /* 使 .search-container 靠右 */
    .el-input {
      margin-right: 10px;
      /* 调整输入框和按钮之间的间距 */
    }
  }
}

.List-content {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap; // 允许换行
  justify-content: flex-start; // 左对齐
}

.List-item {
  width: 24%; // 每行4个
  height: 225px;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex; // 使用 Flexbox 布局
  flex-direction: column; // 垂直排列子元素
  justify-content: center; // 垂直居中
  align-items: flex-start; // 水平居左
  padding: 10px; // 可选：添加内边距以确保内容不贴边
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影
  border: 1px solid #ddd; // 添加边框
  transition: transform 0.3s ease; // 添加过渡效果
  overflow: hidden;

  span {
    margin: 10px 0;
  }

  img {
    max-width: 100%;
    height: auto;
    object-fit:cover;
  }

  .itemContent {
    color: gray;
    font-size: 12px;
  }

  &:hover {
    transform: translateY(-5px); // 悬浮时向上抖动
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-dialog {
  p {
    margin-bottom: 10px;
  }

  .payment-methods {
    margin-top: 20px;
  }

  .qr-code {
    margin-top: 20px;
    text-align: center;

    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
